<template>
  <div class="dropdown">
    <el-dropdown>
      <span class="el-dropdown-link">
        <el-avatar size="default">User</el-avatar>
        {{ name }}
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>
            <el-icon><UserFilled /></el-icon>
            用户信息
          </el-dropdown-item>
          <el-dropdown-item>
            <el-icon><Tools /></el-icon>
            系统管理
          </el-dropdown-item>
          <el-dropdown-item divided @click="handleExitClick">
            <el-icon><CircleCloseFilled /></el-icon>
            退出登录
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { useLoginStore } from '@/store/modules/login'
import localCache from '@/utils/cache'

const router = useRouter()
const name = useLoginStore().userInfo.name

// 退出登录
const handleExitClick = () => {
  // 直接删除token
  localCache.removeCache('token')
  router.push('/main')
}
</script>
<style scoped lang="less">
.el-dropdown-link {
  width: 135px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
